<template>
  <div>
    <div class="title-msg">商品添加</div>

    <div class="option-site">
      <div class="back" @click="backClick">《返回</div>

      <div class="name item">
        <span>商品名称:</span>
        <OrdInput
                :p-input-style="{'width': '315px'}"
                p-placeholder="请输入商品名称..."
                :pMaxLength="15"
                v-model="formData.name"
                @mBlur="mGoodsNameBlur"
                class="input">
        </OrdInput>
      </div>

      <div class="goods-category-store item">
        <span>所属类目:</span>
        <select name="goods_category" v-model="formData.goods_category_id">
          <option v-for="i in goods_cid_array" :value="i.id">{{i.name}}</option>
        </select>

        <span class="store">库存:</span>
        <NumInput
                :p-input-style="{'width': '70px'}"
                p-placeholder="输入库存.."
                :p-max-length="6"
                @mBlur="mStoreBlur"
                v-model="formData.store"
                class="input"
        ></NumInput>
      </div>

      <div class="price-index item">
        <span>商品单价:</span>
        <NumInput
                :p-input-style="{'width': '90px'}"
                p-placeholder="请输入商品单价..."
                :pMaxLength="10"
                v-model="formData.price"
                @mBlur="mPriceBlur"
                class="input">
        </NumInput>

        <span class="index">商品热度:</span>
        <NumInput
                :p-input-style="{'width': '100px'}"
                :p-max-length="3"
                v-model="formData.index"
                @mBlur="mIndexBlur"
                class="index input">
        </NumInput>
      </div>

      <div class="describe item">
        <span>商品描述:</span>
        <textarea
                v-model="formData.describe"
                @blur="mDescribeBlur"
        ></textarea>
      </div>

      <ImgUpload p-title="商品图片"
                 class="goods-picture"
                 @saveImg="mSaveImg"
      ></ImgUpload>

      <button class="add" @click="submitClick">确 认 添 加</button>

    </div>

  </div>
</template>

<script>
  // 引入公共组件
  import NumInput from 'components/common/input/numInput/IInput'
  import OrdInput from 'components/common/input/ordInput/IInput'
  import ImgUpload from "components/common/upload/ImgUpload";

  import {verToken} from 'common/utils'

  // 引入网络请求组件
  import {addGoods, getGoodsCategory} from "network/mix";
  import {mapGetters} from "vuex";

  export default {
    inject: ['reload'],
    name: "GoodAdd",
    components: {
      NumInput,
      OrdInput,
      ImgUpload,
    },
    data() {
      return {
        formData: {
          name: '', // 商品名
          describe: '', // 商品描述
          price: 0, // 商品单价
          store: 0, // 商品库存
          imgBase: '', // 商品图片
          goods_category_id: 0, // 商品所属类目,默认取自己类目的第一个
          index: 1, // 商品热度
        },
        goods_cid_array: [], // 选中的商品类目id

        nameVer: false, // 验证name是否合法
        priceVer: false, // 验证价格是否合法
        indexVer: false, // 验证热度index是否合法
        describeVer: false, // 验证描述是否合法
        storeVer: false, // 验证库存是否合法
      }
    },
    computed: {
      ...mapGetters ({
        token: 'getToken'
      })
    },
    mounted() {
      this.mGetGoodsCategory(); // 通过token的username获得对应商品类目信息
    },

    methods: {
      backClick() {
        this.$router.go(-1);
      },
      mSaveImg({imgBase}) {
        this.formData.imgBase = imgBase;
        console.log('save---------=' + this.formData.imgBase);
      },
      submitClick() {
        console.log(this.nameVer + '--' + this.priceVer + '--' + this.indexVer + '--' + this.storeVer + '--' + this.describeVer);
        if (this.nameVer && this.priceVer && this.indexVer && this.storeVer && this.describeVer && this.formData.goods_category_id !== 0 && this.formData.imgBase !== '') {
          this.mAddGoods();
        } else {
          this.$err_ty_toast.toShow('验证失败,请检查你的输入！！！', 2000);
        }
      },
      mGoodsNameBlur(value) {
        if (value.length > 0) {
          // this.$succ_ty_toast.toShow('成功', 2000);
          this.nameVer = true;
        } else {
          this.$err_ty_toast.toShow('商品名输入有误！！！', 2000);
          this.nameVer = false;
        }
      },
      mPriceBlur(value) {
        if (value.length > 0) {
          // this.$succ_ty_toast.toShow('成功', 2000);
          this.priceVer = true;
        } else {
          this.$err_ty_toast.toShow('价格输入有误！！！', 2000);
          this.priceVer = false;
        }
      },
      mStoreBlur(value) {
        if (value.length > 0) {
          // this.$succ_ty_toast.toShow('成功', 2000);
          this.storeVer = true;
        } else {
          this.$err_ty_toast.toShow('库存输入有误！！！', 2000);
          this.storeVer = false;
        }
      },
      mIndexBlur() {
        if (this.formData.index > 0) {
          // this.$succ_ty_toast.toShow('成功', 2000);
          this.indexVer = true;
        } else {
          this.$err_ty_toast.toShow('热度输入有误,至少为1', 2000);
          this.indexVer = false;
        }
      },
      mDescribeBlur() {
        if (this.formData.describe.length > 0) {
          // this.$succ_ty_toast.toShow('成功', 2000);
          this.describeVer = true;
        } else {
          this.$err_ty_toast.toShow('描述输入至少为5个字符', 2000);
          this.describeVer = false;
        }
      },

      /**axios网络请求方法,添加商品*/
      mGetGoodsCategory() { // 通过token获取自己的商品类目
        getGoodsCategory(0, '', verToken(this.token).username, 0, 0)
          .then(res => {
            this.goods_cid_array = res.page.list;
            console.log(res);
            console.log(this.goods_cid_array);
          })
        .catch(error => {
          console.log(error);
        })
      },

      mAddGoods() {
        // console.log('----------addGood' + this.formData.index);
        addGoods(this.formData)
          .then(res => {
            console.log(res);
            this.$router.go(0)
            this.$succ_ty_toast.toShow('添加商品《' + this.formData.index + '》成功', 5000);
            // this.reload(); // 刷新当前页面,使用App根组件内定义的刷新方法,这样子不会出现空白页,且不会把要刷新页所展示的信息提示吐司信息窗刷掉(this.$router.go(0)方法会出现空白页,且会把信息吐司窗刷新掉)

            // this.formData.name = ''
            // this.formData.describe = ''
            // this.formData.price = 0
            // this.formData.store = 0
            // this.formData.imgBase = ''
            // this.formData.goods_category_id = 0
            // this.formData.index = 1
          })
          .catch(error => {
            this.$err_ty_toast.toShow('添加商品《' + this.formData.index + '》失败！！！', 5000);
            console.log(error);
            this.$router.go(0)
          })
      }
    }
  }
</script>

<style scoped>
  .title-msg {
    height: 60px;
    line-height: 60px;
    margin-left: 20px;
    margin-right: 20px;
    border-bottom-right-radius: 6px;
    border-bottom-left-radius: 6px;
    border: 1px solid #cdcdcd;

    text-align: center;
    font-size: 30px;

    background-color: white;
  }
  .option-site {
    position: relative;
    margin-top: 30px;
    margin-left: 20px;
    margin-right: 20px;
    height: 530px;

    border: 1px solid #cdcdcd;
    border-radius: 6px;
    background-color: #ebebeb;

    /*background-color: green;*/
  }
  .option-site .back {
    position: absolute;
    width: 50px;
    height: 25px;

    color: #919191;
    font-weight: bold;
    font-size: 16px;

    background-color: #fff;
    border-top-left-radius: 6px;
  }
  .option-site .back:hover {
    cursor: pointer;
    color: black;
    opacity: 0.75;
  }

  .item {
    margin-top: 0.5%;
    margin-left: 35%;

    height: 50px;
    width: 30%;
    line-height: 50px;

    /*background-color: yellow;*/
  }
  .item span {
    color: #4c4c4c;
    font-weight: bold;
  }
  .item .input {
    margin-top: 10px;
  }

  .goods-category-store {
    position: relative;
  }
  .goods-category-store select {
    width: 200px;
    height: 30px;
  }
  .goods-category-store .store {
    position: absolute;
    left: 275px;
  }
  .goods-category-store .input {
    position: absolute;
    right: 0;
  }

  .price-index {
    position: relative;
  }
  .price-index span.index {
    position: absolute;
    right: 100px;
  }
  .price-index .index {
    position: absolute;
    right: 0;
  }
  .goods-picture {
    position: absolute;
    margin-left: 42%;
    margin-top: 10px;
  }

  .describe {
    position: relative;
    height: 140px;
  }
  .describe textarea {
    position: absolute;
    height: 100%;
    width: 82%;

    border: none;
    outline: none;
    border-radius: 10px;
  }
  .describe textarea:focus {
    border: 1px solid rgba(85, 167, 255, 0.6);
  }
  .option-site .add {
    position: absolute;
    left: 39%;
    bottom: 6%;

    width: 22%;
    height: 9%;

    color: white;
    font-size: 20px;

    border: none;
    outline: none;
    border-radius: 10px;
    background-color: #28a745;
  }
  .option-site .add:hover {
    cursor: pointer;
    opacity: 0.75;
  }
</style>